import { Component, type ReactNode } from 'react'
import Events from '../eventbus/Events'

export default class RightView extends Component<{ add: () => void }> {
  constructor (props: Readonly<{ add: () => void }>) {
    super(props)
    // 注册一个事件
    Events.on<number>('changeSum', (n) => this.setState({ sum: this.state.sum + n }))
  }
  // #region 变量声明
  state: Readonly<{sum: number}> = {
    sum: 0
  }
  // #endregion

  // #region 事件处理函数

  // #endregion

  // #region 函数
  private clickHandler (num: number) {
    Events.emit('changeNum', num)
  }
  // #endregion

  // 渲染
  public render(): ReactNode {
    return (
      <div className='right'>
        <div className="title">右边组件</div>
        <p>变量sum：{ this.state.sum }</p>
        <button onClick={ () => console.log(this.props.add()) }>sum++</button>
        <button onClick={ () => this.clickHandler(2) }>左边组件的num++</button>
      </div>
    )
  }
}
